<template>
  <div>
    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
      <a-form-item label="原密码">
        <a-input-password v-model:value="updatePasswordForm.oldPassword" />
      </a-form-item>
      <a-form-item label="新密码">
        <a-input-password v-model:value="updatePasswordForm.newPassword" />
      </a-form-item>
      <a-form-item label="确认新密码">
        <a-input-password
          v-model:value="updatePasswordForm.confirmNewPassword"
        />
        <br />
        <div class="mt-15">
          <a-button type="primary" @click="handleModify">修改</a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import { defineComponent, reactive } from 'vue'
import { handleResult } from '../helpers/utils'
import { profileService } from '../services'

export default defineComponent({
  setup () {
    const updatePasswordForm = reactive({
      oldPassword: '',
      newPassword: '',
      confirmNewPassword: ''
    })

    const handleModify = async () => {
      if (
        updatePasswordForm.newPassword !== updatePasswordForm.confirmNewPassword
      ) {
        message.error('密码和确认密码不一样')
        updatePasswordForm.oldPassword = ''
        updatePasswordForm.newPassword = ''
        return
      }

      const res = await profileService.updatePassword(updatePasswordForm)
      handleResult(res).success(({ msg }) => {
        message.success(msg)
      })
    }

    return {
      updatePasswordForm,
      handleModify
    }
  }
})
</script>
